<!DOCTYPE html>
<html>
<head>
    <title>TIFF Viewer</title>
    <script src="https://cdn.jsdelivr.net/npm/geotiff@2.0.7/dist-browser/geotiff.js"></script>
</head>
<body>
    <canvas id="tiffCanvas" style="border:1px solid #000;"></canvas>

    <script>
        async function loadTIFF() {
            try {
                const response = await fetch('../../data/data_humidity_925hpa_2018-12-01.tif');
                const arrayBuffer = await response.arrayBuffer();
                
                const tiff = await GeoTIFF.fromArrayBuffer(arrayBuffer);
                const image = await tiff.getImage();
                const width = image.getWidth();
                const height = image.getHeight();
                
                const canvas = document.getElementById('tiffCanvas');
                canvas.width = width;
                canvas.height = height;
                
                const ctx = canvas.getContext('2d');
                const imageData = ctx.createImageData(width, height);
                
                const raster = await image.readRasters();
                const data = raster[0]; // 使用第一个波段数据
                
                for (let i = 0; i < data.length; i++) {
                    const value = data[i];
                    imageData.data[i*4] = value;   // R
                    imageData.data[i*4+1] = value; // G 
                    imageData.data[i*4+2] = value; // B
                    imageData.data[i*4+3] = 255;   // Alpha
                }
                
                ctx.putImageData(imageData, 0, 0);
            } catch (error) {
                console.error('Error loading TIFF:', error);
                alert('加载TIFF文件失败: ' + error.message);
            }
        }
        
        loadTIFF();
    </script>
</body>
</html>
